<template>
  <div class="star">
      <div class="header">
          <span class="header-title">清柠之星</span>
          <img class="header-line" src="@/assets/mime/outstanding.png"/>
      </div>
      <div class="body">
        <div class="body-item">
          <img class="portrait" src="@/assets/wsj.jpg"/>
          <p class="name">奥斯卡・王世江</p>
          <p class="introduction">感情领域优质创作者</p>
        </div>
        <div class="body-item">
          <img class="portrait" src="@/assets/yzx.jpg"/>
          <p class="name">奥斯卡・岳子瑄</p>
          <p class="introduction">前端开发/vue学习者</p>
        </div>
        <div class="body-item">
          <img class="portrait" src="@/assets/ysh.jpg"/>
          <p class="name">奥斯卡・杨思涵</p>
          <p class="introduction">后端开发/算法</p>
        </div>
        <div class="body-item">
          <img class="portrait" src="@/assets/h.jpg"/>
          <p class="name">奥斯卡・马珂</p>
          <p class="introduction">前端开发/UI设计</p>
        </div>
        <div class="body-item">
          <img class="portrait" src="@/assets/hzq.jpg"/>
          <p class="name">奥斯卡・侯卓倩</p>
          <p class="introduction">喵星文学爱好者</p>
        </div>
      </div>
  </div>
</template>

<script>
export default {
name: 'star',
components: {
},
props: {},
data () {
    return {}
},
methods: {}
}
</script>

<style lang="less" scoped>
.star {
  width: 19.2vw;
  height: 46.5vh;
  position: absolute;
  right: 23vw;
  top: 49vh;
  border-radius: 20px;
  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
  .header {
    height: 6.3vh;
    width: 19.2vw;
    background-color: transparent;
    position: relative;
    .header-title {
      font-size: 22px;
      font-weight: 700;
      color: rgba(13, 128, 120, 1);
      position: absolute;
      left: 1.6vw;
      top: 2.6vh;
    }
    .header-line {
      height: 4.5vh;
      width: 2.8vw;
      position: absolute;
      left: 8vw;
      top: 1.6vh;
    }
  }
  .body {
    .body-item {
      height: 7.9vh;
      background-color: transparent;
      position: relative;
      .portrait {
        height: 5.4vh;
        width: 3.4vw;
        position: absolute;
        top: 1.3vh;
        left: 1.7vw;
        border-radius: 50%;
        background-color: skyblue;
      }
      .name {
        position: absolute;
        top: -0.5vh;
        left: 6vw;
        font-size: 16px;
        font-weight: 700;
        color: rgba(10, 22, 41, 1);
      }
      .introduction {
        position: absolute;
        top: 2.6vh;
        left: 6vw;
        font-size: 14px;
        font-weight: 400;
        color: rgba(145, 146, 158, 1);
      }
    }
  }
}
</style>
